<template>
	<view class="OrderDetails">
		<view class="item one">
			<view class="one_top">
				<view v-if="orderInfo.orderStatus==3">
					<image src="/static/images/OrderDetails/PaymentSuccessful.png" mode="" class="ot_left"></image>
				</view>
				<view class="ot_right">
					<view class="ot_right_top">
						{{ orderInfo.orderStatus == 1 ? '待付款': 
							orderInfo.orderStatus == 2 ? '支付失败':
							orderInfo.orderStatus == 3 ? '订单已结算':
							orderInfo.orderStatus == 4 ? '已入住':
							orderInfo.orderStatus == 6 ? '已评论':
							orderInfo.orderStatus == 10 ? '已退款':
							orderInfo.orderStatus == 11 ? '退款中': '未知，请联系管理员'
						}}
					</view>
					<view class="ot_right_bottom" v-if="orderInfo.orderStatus==3">
						您已成功预订酒店，相关费用已扣除
					</view>
					<view class="ot_right_bottom" v-if="orderInfo.orderStatus==4">
						您已成功入住酒店，相关费用已扣除
					</view>
				</view>
			</view>
			<view class="one_middle">
			</view>
			<view class="one_bottom">
				<view class="ob_left">
					本单金额
				</view>
				<view class="ob_right">
					¥{{orderInfo.totalPrice / 100}}
				</view>
			</view>
		</view>
		<view class="item two">
			<view class="two_top">
				<view class="tt_left grayBox">
					<image
						src="https://bpic.588ku.com//back_origin_min_pic/24/01/13/f07c0ac433e7eb197d2a282dd184355b.jpg"
						mode="" class="grayBox"></image>
				</view>
				<view class="tt_right">
					<view class="ttr_top">
						{{ hotelDetail.name }}
					</view>
					<view class="ttr_middle">
						{{orderInfo.categoryName}}，1 张大床
					</view>
					<view class="ttr_bottom">
						{{ hotelDetail.address }}
					</view>
				</view>
			</view>
			<view class="two_bottom">
				<view class="tbItem" @click="callPhone">
					<image class="icon" src="/static/images/OrderDetails/phone.png"></image>
					<view class="tb_text">
						电话
					</view>
				</view>
				<view class="tbItem" style="margin-left: 124rpx;" @tap="showMap">
					<image class="icon" src="/static/images/OrderDetails/map.png"></image>
					<view class="tb_text">
						地图
					</view>
				</view>
				<view class="tbItem" style="margin-left: 124rpx;">
					<!-- <image class="icon" src="/static/images/HotelRoomList/favorited.png" mode="" v-if="isCollected"
						@click="isCollect">
					</image>
					<image class="icon" src="/static/images/OrderDetails/collect.png" mode="" v-else @click="isCollect">
					</image> -->

					<template v-if="isCollected">
						<image class="icon" src="/static/images/HotelRoomList/favorited.png" @click="cancelCollect">
						</image>
					</template>
					<template v-else>
						<image class="icon" src="/static/images/OrderDetails/collect.png"
							@click="doCollect(orderInfo.categoryId)">
						</image>
					</template>

					<view class="tb_text">
						收藏
					</view>
				</view>
			</view>
		</view>
		<view class="three">
			<uni-forms>
				<view class="content1 flex_jcsb">
					<view class="c1_left">{{orderInfo.startWeekDay}}入住</view>
					<view class="c1_right">{{orderInfo.endWeekDay}}离店</view>
				</view>
				<view class="time flex_jcsb mt15 stayTime" @click="open">
					<view class="t_left">{{orderInfo.bookingCheckInDate}}</view>
					<view class="t_middle">共{{orderInfo.diffDays}}晚</view>
					<view class="t_right">{{orderInfo.bookingCheckOutDate}}</view>
				</view>
				<view class="content2 flex mt15" style="margin-top: 30rpx; font-size: 28rpx; font-weight: 500;">
					{{orderInfo.roomQuantity}}间客房，{{orderInfo.adultsQuantity}}位成年人，{{orderInfo.childQuantity}}未成年人
				</view>
				<view class="content3 flex mt15" style="margin-top: 20rpx; font-size: 28rpx; font-weight: 500;">有早餐
				</view>
				<uni-forms-item label="备注" class="mt15 customerRemarks">
					<view v-model="orderInfo.userRemark" class="bnone textalignright">{{orderInfo.userRemark}}</view>
				</uni-forms-item>
				<view class="line mt15" style="margin-bottom: 20rpx;"></view>
				<uni-forms-item label="入住姓名" class="mt15 customerName">
					<view v-model="orderInfo.guestName" class="bnone textalignright" style="font-size: 28rpx;">{{orderInfo.guestName}}</view>
				</uni-forms-item>
				<uni-forms-item label="联系电话" class="mt15 customerPhone">
					<view v-model="orderInfo.guestMobile" class="bnone textalignright" style="font-size: 28rpx;">{{orderInfo.guestMobile}}</view>
				</uni-forms-item>
				<view class="content4 flex_jcsb mt15" style="margin-top: 10rpx;">
					<view class="c2_left">最晚入住</view>
					<view class="c2_right">
						{{ orderInfo.bookingCheckInDate + ' 14:00:00' }}
						<!-- <uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog"
							:border="false" :clear-icon="false" /> -->
					</view>
				</view>
				<view class="content5 flex_jcsb mt15" style="margin-top: 20rpx;">
					<view class="c5_left" style="text-align: left;">订单编号</view>
					<view class="c5_right flex mt15" style="margin-top: 20rpx;">
						<view class="c5r_left">{{orderInfo.orderNo}}</view>
						<view class="c5r_right" @click="doCopy(orderInfo.orderNo)">复制</view>
					</view>

				</view>
				<uni-forms-item label="下单时间" class="mt15">
					<view v-model="orderInfo.createTime" class="bnone textalignright" style="font-size: 28rpx;">{{orderInfo.createTime}}</view>
				</uni-forms-item>
			</uni-forms>

		</view>
		<view class="item four flexDeCo">
			<view class="four_top">订单服务</view>
			<view class="four_middle">发票</view>
			<view class="four_bottom">
				如需发票，请向酒店前台索取（酒店可提供普票，无法提供专票）
			</view>
		</view>
		<view class="item five" @tap="reOrder">再次预订</view>
		<!-- 日期范围选择 -->
		<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date"
			:insert="info.insert" :range="info.range" @confirm="confirm" />

	</view>
</template>

<script>
	import {
		addFavorite,
		getByCategoryId,
		deleteFavorite,
		getOrderByOrderNo
	} from "../../api/room";
	import getWeekDay from '../../utils/weekDay';
	import {
		navigateTo,
		getProvider,
		showModal,
		showToast,
		uniLogin
	} from "../../utils/promise"
	import {
		hotelDetail
	} from "../../api/hotel";
	export default {
		data() {
			return {
				baseFormData: {
					name: "李姗",
					phone: "123457",
					remarks: "需要Type C 充电线",
				},
				copyText: '这是要复制的文本内容',
				showCalendar: false,
				info: {
					range: true,
					insert: false,
				},
				startTime: "2025-03-19",
				endTime: "2025-03-22",
				totalDay: "1",
				//	<!-- 月日时分选择 -->
				datetimesingle: Date.now() - 2 * 24 * 3600 * 1000,
				isCollected: false,
				orderInfo: {},
				collectId: 0,
				hotelDetail: {},
			};
		},
		methods: {
			onLoad(params) {
				getOrderByOrderNo({
					orderNo: params.orderNo
				}).then((res) => {
					if (res.code === 200) {
						this.orderInfo = res.data

						this.orderInfo.startWeekDay = getWeekDay(this.orderInfo.bookingCheckInDate);
						this.orderInfo.endWeekDay = getWeekDay(this.orderInfo.bookingCheckOutDate);
						let date1 = new Date(this.orderInfo.bookingCheckInDate);
						let date2 = new Date(this.orderInfo.bookingCheckOutDate);
						let diffMilliseconds = date2 - date1; // 差值毫秒数
						let diffDays = diffMilliseconds / (1000 * 60 * 60 * 24); // 转换为天数
						this.orderInfo.diffDays = diffDays
						console.log(this.orderInfo)

						//查询收藏表获取id
						getByCategoryId({
							id: this.orderInfo.categoryId
						}).then((res) => {
							console.log('getByCategoryId----res')
							console.log(res)
							if (res.code == 200) {
								this.collectId = res.data.id
								this.isCollected = true
								console.log("this.collectId----" + this.collectId)
							}
						}).catch((err) => {
							console.log(err)
						})
					}
				}).catch((err) => {
					console.log(err)
				})
				
				this.getHotelDetail()
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log('获取位置成功')
					}
				})
			},
			// <!-- 日期范围选择 -->
			open() {
				this.$refs.calendar.open()
			},
			navigateTo,
			confirm(e) {
				console.log('confirm 返回:', e);
				console.log("e.range:", e.range);
				this.startTime = e.range.before;
				this.endTime = e.range.after;
				this.totalDay = e.range.data.length - 1;
				console.log("this.info", this.info);
			},
			//<!-- 月日时分选择 -->
			// changeLog(e) {
			// 	console.log('change事件:', e);
			// },
			//复制
			doCopy(textToCopy) {
				uni.setClipboardData({
					data: textToCopy,
					success: function() {
						console.log('复制成功');
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail: function(err) {
						console.error('复制失败', err);
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			doCollect(roomCategoryId) {
				console.log('doCollect----roomCategoryId---' + roomCategoryId)
				this.isCollected = !this.isCollected;
				//插入收藏
				addFavorite({
					roomCategoryId: roomCategoryId
				}).then((res) => {
					console.log('addFavorite----res')
					console.log(res)
					if (res.code == 200) {
						//赋值收藏ID
						this.collectId = Number(res.data)
						uni.showToast({
							title: '收藏成功',
							icon: 'success'
						});
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			cancelCollect() {
				this.isCollected = !this.isCollected;
				//取消收藏
				deleteFavorite({
					id: this.collectId
				}).then((res) => {
					console.log('cancelCollect----res')
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: '取消成功',
							icon: 'success'
						});
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			reOrder() {
				const params = {
					guestName: this.orderInfo.guestName,
					guestMobile: this.orderInfo.guestMobile,
					userRemark: this.orderInfo.userRemark || '',
					adultsQuantity: this.orderInfo.adultsQuantity,
					childQuantity: this.orderInfo.childQuantity,
					roomQuantity: this.orderInfo.roomQuantity,
					categoryId: this.orderInfo.categoryId,
					categoryName: this.orderInfo.categoryName,
					isReOrder: true // 标记是再次预定
				}
				navigateTo({
					url: `/pages/ReservationConfirmationPage/ReservationConfirmationPage?order=${JSON.stringify(params)}`
				})
			},
			getHotelDetail() {
				try {
					hotelDetail().then((res) => {
						this.hotelDetail = res.data
					})
				} catch (err) {
					console.log(err)
				}
			},
			showMap() {
				if (this.hotelDetail.latitude && this.hotelDetail.longitude) {
					uni.openLocation({
						latitude: Number(this.hotelDetail.latitude),
						longitude: Number(this.hotelDetail.longitude),
						address: this.hotelDetail.address || '',
						name: this.hotelDetail.name || '',
						scale: 18
					})
				}
			},
			callPhone() {
				if (this.hotelDetail.deskPhone) {
					uni.makePhoneCall({
						phoneNumber: this.hotelDetail.deskPhone
					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";
	//<!-- 月日时分选择 -->

	// 隐藏图标 
	::v-deep .uni-icons {
		display: none !important;
	}

	//修改字体
	::v-deep .uni-date__x-input {}

	::v-deep .uni-forms-item {
		margin-bottom: 0rpx;
	}

	//没生效的样式
	.c5r_right {
		width: 70rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 8rpx;
		border-width: 2rpx;
		background: #FFF1ED;
		font-weight: 400;
		font-size: 24rpx;
		letter-spacing: 0px;
		vertical-align: middle;
		color: #FF9567;
		margin-left: 20rpx;

	}

	.four {
		// width: 750rpx;
		// height: 274rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		align-items: flex-start;

		.four_middle,
		.four_bottom {
			margin-top: 30rpx;
		}

		.four_middle,
		.four_top {
			font-weight: 600;
			font-size: 28rpx;
			letter-spacing: 0px;
		}

		.four_bottom {
			font-size: 24rpx;
			letter-spacing: 0px;
			color: #979797;
			text-align: left;
		}
	}

	.five {
		width: 670rpx;
		height: 88rpx;
		margin: 80rpx auto 50rpx auto;
		border-radius: 60rpx;
		background: #0F4C97 !important;
		text-align: center;
		font-weight: 400;
		font-size: 34rpx;
		line-height: 88rpx;
		letter-spacing: 0px;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.OrderDetails {
		width: 100vw;
		background-color: rgb(245, 245, 245);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		color: #000000;
		text-align: center;

		.item {
			margin-top: 10rpx;
			background: #FFFFFF;
			font-family: 'PingFang SC';
			box-sizing: border-box;
			padding: 30rpx;
		}

		.one {
			margin-top: 0;
			width: 750rpx;
			height: 288rpx;
			display: flex;
			flex-direction: column;

			.one_top {
				display: flex;
				justify-content: center;
				align-items: center;

				.ot_left {
					width: 128rpx;
					height: 128rpx;
				}

				.ot_right {
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.ot_right_top {
						// width: 170rpx;
						// height: 48rpx;
						font-weight: 900;
						font-size: 34rpx;
						// line-height: 48rpx;
						letter-spacing: 0px;
						text-align: center;
						color: #222222;
					}

					.ot_right_bottom {
						// width: 416rpx;
						// height: 36rpx;
						font-weight: 400;
						font-size: 24rpx;
						// line-height: 36rpx;
						letter-spacing: 0px;
						color: #979797;
						margin-top: 10rpx;

					}
				}
			}

			.one_middle {
				width: 690rpx;
				border-width: 1rpx;
				border: 1rpx solid #EDEDED;
				margin: 30rpx auto 0 auto;
			}

			.one_bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 29rpx;

				.ob_left {
					// width: 112rpx;
					// height: 40rpx;
					font-weight: 400;
					font-size: 28rpx;
					// line-height: 40rpx;
					letter-spacing: 0px;
					text-align: center;
					color: #000000;

				}

				.ob_right {
					// width: 114rpx;
					// height: 48rpx;
					font-weight: 500;
					font-size: 34rpx;
					// line-height: 48rpx;
					letter-spacing: 0px;
					text-align: center;
					color: #FF4D00;

				}


			}
		}

		.two {
			// width: 750rpx;
			// height: 380rpx;
			box-sizing: border-box;
			padding: 30rpx;

			.two_top {
				display: flex;

				.tt_right {
					display: flex;
					flex-direction: column;
					color: #000000;
					font-weight: 500;
					margin-left: 20rpx;

					.ttr_top {
						height: 48rpx;
						font-size: 28rpx;
						line-height: 48rpx;
						letter-spacing: 0px;
						text-align: left;
						font-weight: bold;
					}

					.ttr_middle {
						height: 36rpx;
						font-size: 26rpx;
						line-height: 36rpx;
						letter-spacing: 0px;
						text-align: left;
						margin-top: 20rpx;
					}

					.ttr_bottom {
						height: 36rpx;
						font-weight: 400;
						font-size: 24rpx;
						line-height: 36rpx;
						letter-spacing: 0px;
						text-align: left;
						color: #979797;
						margin-top: 20rpx;

					}

				}
			}
		}

		.two_bottom {
			width: 690rpx;
			height: 80rpx;
			border-radius: 160rpx;
			background: #F9F7F7;
			margin: 30rpx auto 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;

			.tbItem {
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 32rpx;
					height: 32rpx;
				}

				.tb_text {
					width: 52rpx;
					height: 36rpx;
					font-weight: 400;
					font-size: 26rpx;
					line-height: 36rpx;
					letter-spacing: 0px;
					text-align: center;
					margin-left: 20rpx;


				}
			}

		}
	}

	.three {
		width: 750rpx;
		margin: 20rpx auto 0 auto;
		// height: 782rpx;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 16rpx;
		background: #FFFFFF;

		//去掉input的边框
		::v-deep .is-input-border {
			border: none;
		}

		//修改form-item中lable的样式
		::v-deep .uni-forms-item__label {
			text {
				font-family: 'PingFang SC';
				font-size: 28rpx;
				letter-spacing: 0px;
				color: #000000;
				font-size: 28rpx;
				font-weight: 500;

			}
		}

		//修改input输入框文字的样式
		::v-deep .uni-easyinput__content-input {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 28rpx;
			letter-spacing: 0px;
			text-align: right;
			color: #979797;

		}

		.customerRemarks {
			text {
				font-family: 'PingFang SC';
				font-weight: 500;
				font-size: 28rpx;
				letter-spacing: 0px;
				color: #000000;
			}
		}

		.content1 {
			font-weight: 400;
			font-size: 26rpx;
			letter-spacing: 0px;
			color: #979797;

			.c1_left,
			.c1_right {
				font-size: 26rpx;
			}
		}

		.content2,
		.content1 {
			font-weight: 500;
			font-size: 28rpx;
			letter-spacing: 0px;
		}

		.stayTime {
			font-weight: 600;
			font-size: 28rpx;
			letter-spacing: 0px;
		}

		.content4 {
			.c2_left {
				font-family: 'PingFang SC';
				font-weight: 400;
				font-size: 28rpx;
				letter-spacing: 0px;
				color: #000000;
			}
			.c2_right {
				font-size: 28rpx;
			}
		}

		.content5 {
			align-items: center;

			.c5_left {
				font-family: 'PingFang SC';
				font-weight: 400 !important;
				font-size: 28rpx !important;
				letter-spacing: 0px;
				color: #000000;

				.c5_right {
					align-items: center;

					.c5r_left {
						font-family: 'PingFang SC';
						font-weight: 500;
						font-size: 28rpx;
						letter-spacing: 0px;
						color: #979797;
					}
				}
			}
		}

		.c5_right {
			.c5r_left {
				font-size: 26rpx;
			}
		}

		.textalignright {
			margin-top: 5px;
			text-align: right;
		}
	}
</style>